<template>
  <el-dialog v-model="dialogVisible" title="发布新鲜事" width="508">
    <el-form :model="form" label-width="auto" label-position="top">
      <el-form-item label="标题">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标签">
        <el-select
          v-model="form.labelList"
          multiple
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="form.content" type="textarea" :rows="3"></el-input>
      </el-form-item>
      <el-form-item label="图集">
        <el-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          :auto-upload="false"
          :limit="9"
          :on-preview="handlePictureCardPreview"
          :on-change="changeFileList"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" style="width: 60%" @click="publish">
        发布</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { inject, reactive, ref, watch } from "vue";
import request from "../../../utils/request";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const options = [
  {
    value: 1,
    label: "好笑",
  },
  {
    value: 2,
    label: "穿搭",
  },
  {
    value: 3,
    label: "影视",
  },
  {
    value: 4,
    label: "美妆",
  },
  {
    value: 5,
    label: "干货",
  },
];
const fileList = ref([
  // {
  //   name: "food.jpeg",
  //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  // },
  // {
  //   name: "food.jpeg",
  //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  // },
  // {
  //   name: "food.jpeg",
  //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  // },
  // {
  //   name: "food.jpeg",
  //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  // },
]);
let previewImage = ref(false);
let dialogImageUrl = ref("");
function handlePictureCardPreview(e) {
  previewImage.value = true;
  dialogImageUrl.value = e.url;
}
const dialogVisible = inject("openPostDialog", false);

let form = reactive({
  title: "",
  content: "",
  labelList: [],
});
function publish() {
  let formdata = new FormData();
  formdata.append("title", form.title);
  formdata.append("content", form.content);
  formdata.append("imgList", fileList.value[0].raw);
  formdata.append("imgList", fileList.value[1].raw);
  request(
    "https://mockapi.eolink.com/SHQdMWnc0600b265c0d20410ed7c36e0eec1dc8fe7e5087/post/add?responseId=1201980",
    formdata,
    1,
    1
  ).then((res) => {
    console.log(res);
  });
}
</script>
<style>
.el-dialog {
  min-width: 35rem;
  border-radius: 20px;
}
.el-dialog__header {
  height: 40px;
  line-height: 40px;
  padding-bottom: 0;
}
.el-dialog__body {
  padding-top: 20px;
  padding-bottom: 0;
}
</style>
<style scoped lang='less'>
.footer {
  margin-top: 1rem;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: flex-end;
  color: red;
  cursor: pointer;
  section {
    margin-left: 2rem;
  }
}
</style>